<template>
<div class="main">
    <div class="wrapper">
     <NavBar showBack :showRight="false"></NavBar>
     <view class="box">
       <div class="login">
         <img src="@/assets/login_bg.png"/>
           <div class="info">
              <div class="input">
                 <van-icon name="manager-o" color="#dadada" size="22" />
                 <div class="_t"><input type="text" v-model.trim="param.userCode" placeholder="账号/手机号"></div>
              </div>
              <div class="input">
                 <div><van-icon name="lock" color="#dadada"  size="22"/></div>
                 <div><input v-model.trim="param.password" :type="type ? 'password' : 'text'" :placeholder="type ? '密码' : '验证码'"></div>
                 <div class="code" v-if="!type" @click="getCode">{{ isCoding ? `${time}s` : '发送验证码' }}</div>
               </div>
              <van-button :loading="loading" loading-text="登录中..." :disabled="disabled" type="success" size="normal" block round @click="login">登录</van-button>
              <div class="change"><div @click="changeLogin">验证码登录</div></div>
           </div>
           
       </div>
     </view>
    </div>
</div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
const time = ref(60)
const type = ref(true) // true 密码登录, false 验证码登录
const loading = ref(false) // 登录按钮状态

const param = reactive({
    password: '',
    userCode: ''
})
const store = useStore()
const { proxy } = getCurrentInstance()

const disabled = computed(() => param.password === '' || param.userCode === '')
const isCoding = computed(() => time.value !== 60 && time.value !== 0)

const changeLogin = () => {
    type.value = !type.value
    param.password = ''
}
const login = async () => {
    loading.value = true
    await store.dispatch('user/login', { type: type.value, ...param })
    loading.value = false
}

const getCode = () => {
    if (!isCoding.value) {
        if (/^1[0-9]{10,10}$/.test(param.userCode)) {
            proxy.$toast.loading('请稍后...')
            store.dispatch('user/getCode', param.userCode).then(res => {
                console.log(res)
                if (res.code === 200) {
                    proxy.$toast('发送成功')
                    time.value--
                    const timer = setInterval(() => {
                        time.value--
                        if(!time.value) {
                            clearInterval(timer)
                            time.value = 60                        
                        }
                    }, 1000)               
                }
            })
        } else {
            proxy.$toast({
                message: '错误的手机号码',
                position: 'top'
            })
        }
    }
}


</script>

<style lang="scss" scoped>
    .main {
        .wrapper {
            background:url(@/assets/login.png) no-repeat center center/cover;
            .box {
                flex: 1;
                display: flex;
                align-items: center;
                .login {
                    position: absolute;
                    left: 20px;
                    right: 20px; 
                    transform: translateY(-50px);
                    img {
                        width: 100%;
                    }
                    .info {
                        position: absolute;
                        left: 40px;
                        right: 30px;
                        top: 65px;
                        & > .input {
                            background-color: white;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            border-radius: 20px;
                            overflow: hidden;
                            padding: 0 10px;
                            margin-bottom: 35px;
                            & > div {
                                height: 100%;
                                display: flex;
                                align-items: center;
                                &:nth-of-type(2), &._t { flex: 1; }
                                input {
                                    height: 100%;
                                    flex: 1;
                                    width: 100%;
                                    border: none;
                                    margin-left: 10px;
                                    &::placeholder {
                                        color:#999;
                                    }
                                }
                                &.code {
                                    font-size: 12px;
                                    white-space: nowrap;
                                    margin-left: 10px;
                                    color: #999;
                                }                                
                            }
                        }
                        .change {
                            padding: 10px 5px 0 0;
                            display: flex;
                            justify-content: flex-end;
                            color: #0A2EE1;
                        }
                    }
                }
            }
        }
    }
</style>